import View from './view';
import Form from './form';
import { isEmpty, keys } from 'lodash';
import { validatorWrapper, getValidate } from '../utils';

import type { Rules, RuleItem } from 'async-validator/dist-types/interface';

export const rules: Rules = {
  imageUrl: [
    {
      required: true,
      message: '请上传图片',
    },
  ],
  borderRadius: [
    {
      type: 'number',
      required: true,
      message: '圆角不能为空',
    },
    {
      type: 'number',
      min: 0,
      message: '圆角不能小于0',
    },
  ],
  coordinateData: [
    {
      type: 'array',
      defaultField: {
        validator: validatorWrapper((_, value) => {
          if (
            isEmpty(value.value) ||
            (keys(value.value).length === 1 && keys(value.value)[0] === 'type')
          ) {
            if (value.pageType === 'goods') {
              throw new Error('请选择商品!');
            }
            if (value.pageType === 'activity') {
              throw new Error('请选择活动!');
            }
            if (value.pageType === 'specifyPage') {
              throw new Error('请选择页面!');
            }
          }
        }),
      } as RuleItem,
    },
  ],
};

export const PAD_STYLE = {
  withPad: {
    value: 'withPad',
    label: '有边距',
  },
  noPad: {
    value: 'noPad',
    label: '无边距',
  },
};

export const coordinateDataItem = {
  title: '',
  imageUrl: '',
  pageType: 'goods',
  value: {
    title: '',
    id: '',
    page: '',
    type: 'goods',
  },
};

const initialValues = {
  imageUrl: '', // 图片路径
  padStyle: PAD_STYLE.noPad.value, // 有无边距
  borderRadius: 0, // 图片圆角
  coordinates: [], // 热区设置--坐标
  coordinateData: [], // 热区内容--数据
};

export type coordinateType = {
  x: number;
  y: number;
  width: number;
  height: number;
  xRate: number;
  yRate: number;
  widthRate: number;
  heightRate: number;
  aspectRate: number; //宽高比
};

export type HotspotValue = {
  coordinates: coordinateType[];
  imageUrl: string;
  padStyle: string;
  borderRadius: number;
};

export default {
  type: 'Hotspot',
  title: '万能热区',
  logo: 'https://saascdn.yumchina.com/crmyumc/768479403501420544/member/202308211334535258.jpg',
  initialValues,
  view: View,
  form: Form,
  limit: 10,
  validate: getValidate(rules),
};
